<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.top_content{
				height: 200px;
				width: 100%;
				background-color: #c7c7c7;
				line-height: 200px;
				text-align: center;
			}
			/* 吸顶灯 */
			.sticky{
				height: 40px;
				width: 100%;
				background-color: #333;
				text-align: center;
				line-height: 40px;
				color: aliceblue;
			}
			.main_content{
				height: 8000px;
				width: 100%;
			}
			/* 吸顶灯效果:顶死页面顶部效果 */
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
			
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//JQ相关操作   思路：滚动下拉条，超过200px，吸顶灯定死页面上
				//超过200px   固定>滚动   吸顶灯通过添加样式操作:顶死页面上
				//①固定值:获取到达吸顶灯位置的偏移量
				//.top  获取body顶部
				var so=$(".sticky").offset().top;  
				//$(Window)  来监听窗口的事件:滚动、窗口视图大小
				//scroll()监听页面滚动事件
				$(Window).scroll(function(){
					//超过200px 
					//②获取页面滚动值:动态值   scrollTop()获取滚动位置【动态值】
					var st=$(Window).scrollTop();
					//超过200px   动态值>固定值200 条件满足:页面吸顶灯样式顶死
					if(st>so){
						$(".sticky").addClass("ac");
					}else{
						$(".sticky").removeClass("ac");
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="top_content">顶部内容区域</div>
		<div class="sticky">吸顶灯</div>
		<div class="main_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil, fugiat praesentium expedita eaque mollitia totam distinctio inventore dolores optio cumque porro quam hic suscipit eos quos illo commodi voluptate.</div>
	</body>
</html>